A Compact, Robust, and Efficient ZK Fisheye

Author
Jumper Chen, Engineer, Potix Corporation

Date
July 11, 2008

Version
Applicable to zk-3.5.0-FL-2008-07-11 and later.

Introduction

Fisheye is a term that takes in an extremely wide, hemispherical image introduced in photography. As the well-known Apple computer, they use the fisheye technique to show the amazing desktop menu that enhances the user experience with a menu. In the past, ZK provided both Fisheyelist and Fisheyeitem components that integrate with Dojo to show the fisheye technique with a menu. The performance of the Fisheyelist, however, is not acceptable on Linux environment, and the package of the Dojo library is very heavy to load when the developer merely uses the one feature of them. Due to these reasons, we decide to implement ZK own Fisheye components, Fisheyebar and Fisheye, that are more compact, robust, and efficient than Dojo's.

Live Demo

Let's have a look at the demo of the ZK Fisheyebar.

The following fragment is the Fisheyebar example,

<fisheyebar style="position:absolute;margin:20px; top:50px; left: 200px"
    attachEdge="top">
    <fisheye image="/img/icon_browser.png" label="Web Browser"
      onClick="alert(self.label)" />
    <fisheye image="/img/icon_calendar.png" label="Calendar"
      onClick="alert(self.label)" />
    <fisheye image="/img/icon_email.png" label="Email"
      onClick="alert(self.label)" />
    <fisheye image="/img/icon_texteditor.png" label="Text Editor"
      onClick="alert(self.label)" />
    <fisheye image="/img/icon_update.png" label="Software Update"
      onClick="alert(self.label)" />
    <fisheye image="/img/icon_users.png" label="Users"
      onClick="alert(self.label)" />
</fisheyebar>

As you can see, the code of the Fisheyebar is the same as using the Fisheyelist component. In fact, we change the component name from Fisheyelist and Fisheyeitem to Fisheyebar and Fisheye for backward compatibility. Note that the Fisheyebar and the Fisheye can peacefully coexist with the Fisheyelist and the Fisheyeitem.

Summary

The fisheye menu can enhance the UI to be more user-friendly. And the performance of the fisheye on all kinds of environment has been optimized, so the developer doesn't worry about the performance issue, handled by ZK automatically. If you come up with any problem, please feel free to ask us on ZK forum.

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.